<template>
	<view class="container">
		<!-- 通告栏 -->
		<uni-notice-bar align="center" v-if="searchData.shName==='测试'" single text="未识别到用户所属组别,仅展示测试数据"></uni-notice-bar>
		<!-- 筛选条件 -->
		<view class="example-body">
			<button class="select-button1" @click="showDrawer('showLeft')">筛选条件</button>
			<button class="select-button2" @click="refresh()">刷新</button>

			<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
				<!-- 选择商户 -->
				<uni-section title="商户" type="line">
					<uni-data-select v-model="searchData.shName" :localdata="tableShNameList" @change="changeShName" :clear="false"></uni-data-select>
				</uni-section>
				<!-- 选择时间 -->
				<uni-section title="时间" type="line">
					<view class="page">
						<view class="example-body">
							<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" />
						</view>
					</view>
				</uni-section>

				<!-- 款号 -->
				<uni-section title="款号" type="line">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="searchData.ddkh" @change="refresh"></uni-easyinput>
				</uni-section>
				<!-- 外加工 -->
				<uni-section title="外加工" type="line">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="searchData.djg" @change="refresh"></uni-easyinput>
				</uni-section>
				<!-- 商品名称 -->
				<uni-section title="商品名称" type="line">
					<uni-easyinput class="uni-mt-5" trim="all" v-model="searchData.spName" @change="refresh"></uni-easyinput>
				</uni-section>
				<!-- 小计 -->
				<view>小计:{{tablePriceTotal}}</view>
			</uni-drawer>
		</view>
		
		

		<!-- 表格 -->
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center" width='200rpx' v-if="showDetailFlag">照片</uni-th>
				<uni-th align="center" width='200rpx'>款号</uni-th>
				<uni-th align="center" width='140rpx' v-if="showDetailFlag">外加工</uni-th>
				<uni-th align="center" width='300rpx'>商品</uni-th>
				<uni-th align="center" width='100rpx'>数量</uni-th>
				<uni-th align="center" width='100rpx' v-if="showDetailFlag">单价</uni-th>
				<uni-th align="center" width='100rpx' v-if="showDetailFlag">小计</uni-th>
				<uni-th align="center" width='150rpx'>日期</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr align="center" v-for='item in tableData' :key='item.id'>
				<uni-td align="center" v-if="showDetailFlag"><image style="width: 200rpx;height: 200rpx;" @click='clickImg(this.staticSp + item.pic)' :src="staticSp + item.pic"></image></uni-td>
				<uni-td align="center">{{item.ddkh}}</uni-td>
				<uni-td align="center" v-if="showDetailFlag">{{item.djg}}</uni-td>
				<uni-td align="center">{{item.spName}}</uni-td>
				<uni-td align="center">{{item.number}}</uni-td>
				<uni-td align="center" v-if="showDetailFlag">{{item.price}}</uni-td>
				<uni-td align="center" v-if="showDetailFlag">{{item.total}}</uni-td>
				<uni-td align="center">{{item.datetime}}</uni-td>
			</uni-tr>
		</uni-table>
		<!-- 分页器 -->
		<uni-pagination :total=tableDataTotal @change='pageChange'></uni-pagination>
		<!-- 悬浮按钮 -->
		<view class="showDetail" @click="showDetail()">
			<view class="text">详细/简略</view>
		</view>
	</view>
</template>
<script>
	import config from "../../utils/config.js"
	export default {
		onLoad() {
			this.getShNameList();
		},
		data() {
			return {
				showDetailFlag: false,
				staticSp: config.staticSp,
				range: ["", ""],
				tableShNameList: ['测试'],
				tableDataTotal: 0,
				tablePriceTotal: 0,
				tableData: [],
				searchData: {
					shName: '',
					shId: '',
					ddkh: '',
					djg: '',
					spName: '',
					timeBeg: '',
					timeEnd: '',
					price: '',
					isOut: '',
					orderBy: '',
					page: 1,
					pageSize: 10,
				}
			}
		},
		watch: {
			range(newval) {
				this.searchData.timeBeg = this.range[0]
				this.searchData.timeEnd = this.range[1]
				this.searchData.page = 1
				this.refresh()
			},
		},
		methods: {
			// 获取用户数组
			getShNameList() {
				if (uni.getStorageSync('userData')['storeUserArr'] === undefined){
					this.tableShNameList = []
					this.searchData.shName = '测试'
				}else{
					this.tableShNameList = uni.getStorageSync('userData')['storeUserArr']
					this.searchData.shName = this.tableShNameList[0]['value']
				}
				this.refresh()
			},
			// 刷新数据
			refresh() {
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getTradeBySearch",
					data: that.searchData
				}).then(res => {
					that.tableData = res.data
					that.tableDataTotal = res.total
					that.tablePriceTotal = res.priceTotal
				})
			},
			// 分页控制器
			pageChange(e) {
				let target = e.current
				this.searchData.page = target
				this.refresh()
			},
			// 选择商户
			changeShName(e) {
				this.searchData.shId = e
				this.searchData.page = 1
				this.refresh()
			},
			// 打开窗口
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 展示详细数据 
			showDetail(){
				if (this.showDetailFlag){
					this.showDetailFlag = false
				}else{
					this.showDetailFlag = true
				}
			},
			// 点击图片放大
			clickImg(imgUrl) {
				console.log('wh')
				wx.previewImage({
					urls: [imgUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#eee;
	}
	.select-button1{
		height: 100rpx;
		width: 78%;
		margin: 1%;
		right: 0;
		color: #eee;
		background-color: #e08020;
		float: left;
	}
	.select-button2{
		height: 100rpx;
		width: 18%;
		margin: 1%;
		right: 0;
		color: #eee;
		background-color: #e08020;
		float: left;
	}
	.showDetail{
		position: fixed;
		z-index: 10;
		display: flex;
		bottom:50px;
		right:0;
		background-color: #e08020;
		padding: 25rpx;
		border-radius: 50rpx 0 0 50rpx;
		font-size: 40rpx;
		color:#eee;
		
		.text{
			height: 50rpx;
			width: 200rpx;
			text-align: center;
		}
	}
</style>